<template>
	<div v-show="showMsgFlag" class="userMain">
		<div class="weui-form-preview wrapper">
			<div v-if="caseShowDetailUsers && caseShowDetailUsers!=[]" v-for="(item,index) in caseShowDetailUsers">
				<div class="weui-form-preview__hd">
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label">课程分配时售价金额</label>
						<em class="weui-form-preview__value">{{item.caseCurPrice}}元</em>
					</div>
				</div>
				<div class="weui-form-preview__bd">
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label">授课人员姓名</label>
						<span class="weui-form-preview__value">{{item.accountName}}</span>
					</div>
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label">课程开始时间</label>
						<span class="weui-form-preview__value">{{item.caseStartTime}}</span>
					</div>
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label">课程结束时间</label>
						<span class="weui-form-preview__value">{{item.caseEndTime}}</span>
					</div>
					<div class="weui-form-preview__item">
						<label class="weui-form-preview__label">课程状态</label>
						<span class="weui-form-preview__value">{{item.dealName}}</span>
					</div>
				</div>
			</div>
			<div v-if="caseShowUsers && caseShowUsers !=[]">
				<div class="weui-cell__hd">

				</div>
				<div class="weui-cells" v-for="(item,index) in caseShowUsers">
					<a class="weui-cell " href="javascript:;">
						<div class="weui-cell__bd ">
							<span class="demo_badge_title fl">工号</span>
						</div>
						<div class="weui-cell__ft weui-cells__tips">{{item.account}}</div>
					</a>
					<a class="weui-cell " href="javascript:;">
						<div class="weui-cell__bd ">
							<span class="demo_badge_title fl">姓名</span>
						</div>
						<div class="weui-cell__ft weui-cells__tips">{{item.name}}</div>
					</a>
					<a class="weui-cell " href="javascript:;">
						<div class="weui-cell__bd ">
							<span class="demo_badge_title fl">电话</span>
						</div>
						<div class="weui-cell__ft weui-cells__tips">{{item.telePhone}}</div>
					</a>
					<button @click="showDeleteButton(item)"  class="weui-btn_cell weui-btn_cell-warn">移除</button>
				</div>
			</div>
			<div v-if="isShowDefault">
				<div style="margin: 0 auto;">暂无数据</div>
			</div>

		</div>

		<div class="weui-form-preview__ft ft">
			<a class="weui-form-preview__btn weui-form-preview__btn_primary" @click="hideShowUsers">确定</a>
		</div>
		<div class="js_dialog" v-if="showdelete" style="z-index: 1003;">
			<div class="weui-mask"></div>
			<div class="weui-dialog weui-skin_android">
				<div class="weui-dialog__bd">
					确认取消该员工本门课程分配吗？
				</div>
				<div class="weui-dialog__ft">
					<a @click="delCaseFromUser" style="color: #d40815;" class="weui-dialog__btn weui-btn_cell-warn">确定</a>
					<a @click="showdelete = false" class="weui-dialog__btn weui-btn_cell_primary">取消</a>
				</div>
			</div>
		</div>
	</div>
	</div>

</template>

<script>
	export default {
		name: 'showCaseUsers',
		data() {
			return {
				isShowDefault: false,
				showdelete: false,
				deleteObj:{},
			}
		},
		methods: {
			hideShowUsers() {
				this.$parent.hideShowUsers()
			},
			showDeleteButton(item){
				this.showdelete= true;
				this.deleteObj= item;
			},	
			clearLoop(e) {
				clearTimeout(this.Loop);
			},

		},
		created() {
			console.log("router" + this.$router.path)
		},
		props: {
			caseShowDetailUsers: {
				type: Array,
				default: () => []
			},
			caseShowUsers: {
				type: Array,
				default: () => []
			},
			showMsgFlag: {
				type: Boolean,
				default: false
			},

		},
		watch: {
			caseShowDetailUsers: function(newVal, oldVal) {
				if (newVal && newVal.length == 0 && caseShowUsers) {
					this.isShowDefault = true;
				}

			},
			caseShowUsers: function(newVal, oldVal) {
				if (newVal && newVal.length == 0 && caseShowDetailUsers) {
					this.isShowDefault = true;
				}
			}
		}
	}
</script>

<style>
	.fl {
		display: grid;
	}

	.userMain {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		z-index: 1003;
		background: rgba(0, 0, 0, 0.3);
		text-align: center;
		overflow: hidden;
		white-space: nowrap;
	}

	.userMain:after {
		content: "";
		display: inline-block;
		width: 0;
		height: 100%;
		visibility: hidden;
		vertical-align: middle;
	}

	.wrapper {
		height: 90%;
		width: 90%;
		overflow: auto;
		display: inline-block;
		vertical-align: middle;
		background: #fff;
		color: #333333;
		border-radius: 5px;
		max-width: 100%;
	}

	.ft {
		position: absolute;
		bottom: 0;
		left: 50%;
		transform: translate(-50%, -50%);
	}
</style>
